<template>
	<view class="ui_avatar_group">
		<view class="ui_avatar_group_content">
			<view class="item" :class="index >= 3 && 'more'" v-for="(avatar, index) in item.data" :key="index">
				<custom-avatar :item="{ ...avatar, type: 'small' }" v-if="index < 3"></custom-avatar>
			</view>
			<view v-if="(item.count && item.count > 3) || (item.data && item.data.length > 3)" class="item_more">
				{{ (item.count && formatNum(item.count - 4)) || (item.data && item.data.length - 4) }}+
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	created() {
		console.log(this.$props.item);
	},
	methods: {
		formatNum(v) {
			return v > this.$props.item.max ? this.$props.item.max : v;
		}
	}
};
</script>
<style lang="less">
@import '../../static/style/common.less';
.ui_avatar_group {
	.ui_avatar_group_content {
		font-size: 24rpx;
		display: flex;
		padding: 0 0 0 32rpx;
		.item {
			margin: 0 0 0 -32rpx;
			.ui_avatar {
				border-radius: 50%;
				border: 2rpx #ffffff solid;
			}
			&.more {
				display: none;
			}
		}
		.item_more {
			width: auto;
			height: 48rpx;
			border-radius: 48rpx;
			overflow: hidden;
			padding:0 10rpx;
			.flexCenter;
			margin: 0 0 0 -32rpx;
			background-color: #07c160;
			color: #ffffff;
		}
	}
}
</style>
